refactor(Android, Tabs): Appearance refactor on Android by t0maboro · Pull Request #3672 · software-mansion/react-native-screens

t0maboro · 2026-02-20T11:59:54Z

Description

This PR introduces a refactor of the Android tabs appearance configuration into a more structured and explicit form.

The goal of this change is to:

Align the Android API more closely with the iOS implementation
Make appearance configuration more predictable

Structured Appearance Model

The appearance configuration for Android tabs has been reorganized into clearly separated sections, describing different aspects of TabBar:

backgroundColor
itemRippleColor
labelVisibilityMode
itemColors (normal / selected / focused / disabled)
activeIndicator
typography
badge

Each part (colors, typography, badge, etc.) is now explicitly grouped in dedicated interfaces.

From now on, the appearance of the entire tab bar on Android is determined by the currently active Screen, the same way it is handled on iOS.

This means:

The active screen fully controls the tab bar appearance.
When the active screen changes, the tab bar appearance updates accordingly.

Notes on Dynamic Updates

While the API allows updating appearance dynamically, some properties can negatively affect layout when changed drastically at runtime.

In particular:

labelVisibilityMode
activeIndicator.enabled
typography props

Changing these props dynamically may:

Trigger layout recalculations
Cause visible layout glitches
Lead to janky or unstable UI transitions

For this reason, it is not recommended to change these properties aggressively at runtime. They should be treated as relatively stable configuration options.

Closes: https://github.com/software-mansion/react-native-screens-labs/issues/955

Changes

Renamed classes: AppearanceApplicator & AppearanceCoordinator are now less coupled with the Host component, as they depend on the selected Screen, either. Therefore, I decided to remove "Host" from the names of these classes.
Diffing mechanism before applying tab bar appearance updates was added. This will prevent assigning the same values multiple times if a specific prop remains unchanged.
ColorsStateLists were extended to support focused and disabled states - parity with UIAppearance states from UIKit.
New TabsAppearanceModel was defined.
Old way of passing all props as top-level props was replaced with passing appearance config object from JS. This is a breaking change that will be hidden behing the compatibility flag.
All native prop "legacy" setters were replaced with the specific parser for Appearance object.
Appearance configuration was moved from Host to Screen.

Before & after - visual documentation

This PR unlocks some new behaviors, not sure if Before section is needed, as for Tab 1 & Tab 4 - the flow remains unchanged. For Tab2 & Tab3 - I'm adding new features for configuring TabBar appearance, which are covered in After video

After

after.mov

Test plan

Updated TestBottomTabs example to match the new API structure.

Checklist

Included code example that can be used to test this change.
Updated / created local changelog entries in relevant test files.
For visual changes, included screenshots / GIFs / recordings documenting the change.
For API changes, updated relevant public types.
Ensured that CI passes

Copilot

Pull request overview

This PR refactors the Android tabs appearance configuration API from a flat, host-level prop structure to a more structured, screen-level appearance object. The change aligns the Android API more closely with the iOS implementation by moving appearance control from the TabsHost to individual TabScreen components, allowing each screen to define how the tab bar should appear when that screen is active.

Changes:

Introduced structured AndroidTabsAppearance type with nested interfaces for different appearance aspects (colors, typography, badge, activeIndicator)
Moved appearance configuration from TabsHost props to TabScreen.standardAppearanceAndroid prop
Implemented diffing mechanism in TabsAppearanceApplicator to prevent redundant UI updates
Added compatibility flag usesRefactoredTabsAppearanceApiAndroid for downstream library detection

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/flags.ts	Added compatibility flag for the refactored Android tabs appearance API
src/fabric/bottom-tabs/BottomTabsScreenNativeComponent.ts	Added Android appearance types and standardAppearanceAndroid prop; removed legacy badge color props
src/fabric/bottom-tabs/BottomTabsNativeComponent.ts	Removed all legacy Android-specific appearance props from TabsHost
src/components/tabs/TabsScreen.types.ts	Added new structured Android appearance types with comprehensive documentation; moved TabBarItemLabelVisibilityMode from TabsHost
src/components/tabs/TabsScreen.tsx	Added mapper functions to convert public API types to native prop format with proper color processing
src/components/tabs/TabsHost.types.ts	Removed all Android appearance props and unnecessary imports
apps/src/tests/issue-tests/TestBottomTabs/index.tsx	Updated test to use new screen-level appearance API instead of host-level props
android/.../RNSBottomTabsScreenManagerInterface.java	Replaced badge color setters with standardAppearanceAndroid setter
android/.../RNSBottomTabsScreenManagerDelegate.java	Updated prop handling to use standardAppearanceAndroid instead of individual badge color props
android/.../RNSBottomTabsManagerInterface.java	Removed all Android appearance prop setters from host manager interface
android/.../RNSBottomTabsManagerDelegate.java	Removed all Android appearance prop case handlers from host manager delegate
android/.../TabsHostViewManager.kt	Removed all `@ReactProp` methods for Android appearance configuration
android/.../TabsHost.kt	Removed appearance-related observable properties; made currentFocusedTab internal; renamed coordinator; added onAppearanceChanged callback
android/.../TabsAppearanceModel.kt	New file defining internal data classes for Android tabs appearance structure
android/.../TabsAppearanceCoordinator.kt	Renamed from TabsHostAppearanceCoordinator; updated to use appearance from current focused tab
android/.../TabsAppearanceApplicator.kt	New file replacing TabsHostAppearanceApplicator with diffing mechanism for all appearance properties
android/.../TabScreenViewManager.kt	Added parser for standardAppearanceAndroid prop with helper functions for safe type extraction; removed badge color prop setters
android/.../TabScreenDelegate.kt	Added onAppearanceChanged callback interface
android/.../TabScreen.kt	Added appearance property with change observer; removed badge color properties

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/tabs/TabsScreen.types.ts

src/fabric/tabs/TabsScreenNativeComponent.ts

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabsAppearanceApplicator.kt

Copilot

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabsAppearanceApplicator.kt

Copilot

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

t0maboro · 2026-02-23T13:31:04Z

src/flags.ts

+   * appearance props for Tabs on Android. To allow backward compatibility,
+   * we expose a way to check whether the new implementation is in use or not.
+   */
+  usesRefactoredTabsAppearanceApiAndroid: true,


note: maybe it should be coordinated with #3633 and hidden behind a single compat. flag?

…ppearanceApplicator.kt Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

t0maboro mentioned this pull request Feb 20, 2026

feat(Android, Stack): Add appearance API to customize tab bar items based on state #3654

Closed

5 tasks

t0maboro marked this pull request as ready for review February 23, 2026 12:22

t0maboro changed the title ~~WIP - Appearance refactor on Android~~ refactor(Android, Tabs): Appearance refactor on Android Feb 23, 2026

t0maboro requested review from Copilot, kkafar, kligarski and kmichalikk February 23, 2026 12:23

Copilot started reviewing on behalf of t0maboro February 23, 2026 12:23 View session

Copilot AI reviewed Feb 23, 2026

View reviewed changes

t0maboro requested a review from Copilot February 23, 2026 12:50

Copilot started reviewing on behalf of t0maboro February 23, 2026 12:50 View session

Copilot AI reviewed Feb 23, 2026

View reviewed changes

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabsAppearanceApplicator.kt Outdated Show resolved Hide resolved

t0maboro requested a review from Copilot February 23, 2026 13:12

Copilot started reviewing on behalf of t0maboro February 23, 2026 13:12 View session

Copilot AI reviewed Feb 23, 2026

View reviewed changes

t0maboro commented Feb 23, 2026

View reviewed changes

t0maboro mentioned this pull request Feb 23, 2026

feat(Android, Tabs): Add support for selectedIcon on Android #3633

Open

5 tasks

t0maboro added 13 commits February 23, 2026 15:11

Skeleton for appearance refactor on android

fcfd79b

Fix badge styles

f8b5f67

Parity for font size

40dd07b

Add props that can be changed dynamically to example

1dd85e2

Remove resolved TODO

ed77ab7

Fix selected font color

32ddda6

Paper

dc1b967

Add default apperance to bypass jumping content

4019de0

Restore

1d673c3

Move appearance definitions to a separate file

fe74676

Add prop diffing

421d1aa

Rename classes and files

8d83af7

Add compatibility flag

9e8cf32

t0maboro and others added 11 commits February 23, 2026 15:15

Cleanup native

d9ab7fa

Cleanup JS

d75753c

Linter

582fe8e

Rename

7585f7f

Fix doc

187457f

Fix types

bebc027

Change order

1c578f8

Remove type casting

e32315a

Align default

dc1bcfa

Update android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabsA…

3f74549

…ppearanceApplicator.kt Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Fix compilation issues after rebase

4434a66

t0maboro force-pushed the @t0maboro/appearance-api-android-2 branch from abc0830 to 4434a66 Compare February 23, 2026 14:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

refactor(Android, Tabs): Appearance refactor on Android#3672

refactor(Android, Tabs): Appearance refactor on Android#3672
t0maboro wants to merge 24 commits intomainfrom
@t0maboro/appearance-api-android-2

t0maboro commented Feb 20, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

t0maboro Feb 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Comments

Conversation

t0maboro commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Before & after - visual documentation

After

Test plan

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

t0maboro Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

t0maboro commented Feb 20, 2026 •

edited

Loading